import React, { useEffect, useState } from 'react'
import { SearchBar } from '@nutui/nutui-react';
import './home.css'
import { Grid, Card } from 'antd-mobile'
import styles from './home.css'
import { getKillList, getProList } from '../../api';
import CountdownPage from '../../components/dao';
import { InfiniteScroll, List } from 'antd-mobile'
import { ListItem } from 'antd-mobile/es/components/list/list-item';
import { useNavigate } from 'react-router-dom';


export default function Home() {

  let navigate = useNavigate()

  let [killList, setKillList] = useState([])
  let [proList, setProList] = useState([])
  let [count, setCount] = useState(1)
  const [hasMore, setHasMore] = useState(true) //是否有更多数据

  useEffect(() => {
    getKillList().then(res => {
      console.log(res.data);
      setKillList(res.data.data);
    })
    getProList().then(res => {
      console.log(res.data);
      setProList(res.data.data)
    })
  }, [])

  async function loadMore() {
    count++
    setCount(count)
    const append = await getProList(count)  //取下一页面的数据
    setProList(val => [...val, ...append.data.data])
    setHasMore(append.data.data.length > 0)  //有数据才进行加载
  }

  const goAddress = () => {
    if (localStorage.getItem('token')) {
      navigate('/my')
    } else {
      navigate('/login')
    }

  }

  return (
    <div>
      <div className="head">
        <span onClick={goAddress}>地址</span>
        <SearchBar onClickInput={() => navigate('/search')} shape="round" />
        {localStorage.getItem('token') && <span onClick={() => navigate('/my')}>我的</span>}
        {!localStorage.getItem('token') && <span onClick={() => navigate('/login')}>登录</span>}
      </div>

      <Grid columns={3} gap={8}>
        <Grid.Item>
          <div className={styles['grid-demo-item-block']}>
            <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg" alt="" />
            <p>京东超市</p> </div>
        </Grid.Item>
        <Grid.Item>
          <div className={styles['grid-demo-item-block']}>
            <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg" alt="" />
            <p>京东超市</p> </div>
        </Grid.Item>
        <Grid.Item>
          <div className={styles['grid-demo-item-block']}>
            <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg" alt="" />
            <p>京东超市</p> </div>
        </Grid.Item>
        <Grid.Item>
          <div className={styles['grid-demo-item-block']}>
            <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg" alt="" />
            <p>京东超市</p> </div>
        </Grid.Item>
        <Grid.Item>
          <div className={styles['grid-demo-item-block']}>
            <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg" alt="" />
            <p>京东超市</p> </div>
        </Grid.Item>
        <Grid.Item>
          <div className={styles['grid-demo-item-block']}>
            <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg" alt="" />
            <p>京东超市</p> </div>
        </Grid.Item>

      </Grid>

      <Card title={
        <div className='miaoSha'>
          <div className='a'>京东秒杀</div>
          <div className='b'>十点专场</div>
          <CountdownPage />
        </div>
      }>
        {
          killList.map(item => {
            return <div key={item.proid}>
              <img src={item.img1} alt="" />
              <p>￥{item.originprice}</p>
            </div>
          })
        }
      </Card>

      <div className="counter">
        <List>
          {
            proList.map(item => {
              return <ListItem key={item.proid} onClick={() => navigate("/detail/" + item.proid)}>
                <img src={item.img1} alt="" />
                <p className='desc'>{item.proname}</p>
                <p className='price'>￥{item.originprice}</p>
              </ListItem>
            })
          }
        </List>
      </div>


      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
  )
}

